<template>
	<view>
		<my-search @goSearch="goSearch"></my-search>
		<view class="cate">
			<scroll-view scroll-y="true" class="left-first-leavel" :style="{height:height+'px'}">
				<block v-for="(item,i) in cateList" :key="item.cat_id">
					<view :class="['left-first-leavel-item',item.cat_id==active?'active':'']" @click="changeActive(item.cat_id)">{{item.cat_name}}</view>
				</block>
			</scroll-view>
			<scroll-view scroll-y="true" class="right-secend-leavel" :scroll-top="scrollTop" :style="{height:height+'px'}">
				<view class="cate-lv2" v-for="(item2, i2) in cateLevel2" :key="i2">
				    <view class="cate-lv2-title">/ {{item2.cat_name}} /</view>
					<view class="cate-lv3-list">
					      <!-- 三级分类 Item 项 -->
					      <view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="i3" @click="goDetail(item3.cat_id)">
					        <!-- 图片 -->
					        <image :src="item3.cat_icon"></image>
					        <!-- 文本 -->
					        <text>{{item3.cat_name}}</text>
					      </view>
					    </view>
				  </view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import tabbar from '@/mixins/tabbar-badge.js'
	export default {
		mixins:[tabbar],
		data() {
			return {
				height:'',
				active:0,
				// 分类数据列表
				cateList: [],
				cateLevel2: [],
				scrollTop:0
			};
		},
		onLoad() {
			const userPhoneInfo = uni.getSystemInfoSync()
			this.height = userPhoneInfo.windowHeight - 50
			// console.log(userPhoneInfo);
			this.getCateList()
			console.log(this.active);
		},
		methods:{
			changeActive(i){
				this.active = i
				this.scrollTop = this.scrollTop==0?'0.1':'0'
				this.cateList.forEach(item=>{
					if(item.cat_id==i) this.cateLevel2 = item.children
				})
			},
			async	getCateList(){
				const {data:res} = await uni.$http.get('/api/public/v1/categories')
				if(res.meta.status !==200) return uni.$showMsg()
				this.cateList = res.message
				this.cateList.forEach(leavel=>{
					leavel.children.forEach(leavel2=>{
						if(!Array.isArray(leavel2.children)) return
						leavel2.children.forEach(leavel3=>{
							leavel3.cat_icon = leavel3.cat_icon.replace(/dev/g,'web')
						})
					})
				})
				this.active = res.message[0].cat_id
				// https://api-ugo-dev.itheima.net
				this.cateLevel2 = res.message[0].children
			},
			// 跳转商品的详情页面
			goDetail(cid){
				console.log(cid);
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list?cid='+cid
				})
			},
			goSearch(){
				console.log('跳转搜索页面');
				uni.navigateTo({
					url:'/subpkg/search/search'
				})
			}
		}
	}
</script>

<style lang="scss">
	.cate {
		display: flex;
	}
	.left-first-leavel {
		width: 110px;
		height: 800px;
	}
	.right-secend-leavel {
		width: 100%;
		height: 800px;
	}
	.left-first-leavel-item {
		position: relative;
		width: 100%;
		height: 60px;
		line-height: 60px;
		padding-left: 10px;
		background-color: #eee;
		&.active {
			color: red;
			background: #fff;
		}
		&.active::after {
			content: '';
			width: 3px;
			height: 80%;
			background-color: red;
			position: absolute;
			left: 0px;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	.cate-lv2-title {
	  font-size: 12px;
	  font-weight: bold;
	  text-align: center;
	  padding: 15px 0;
	}
	.cate-lv3-list {
	  display: flex;
	  flex-wrap: wrap;
	
	  .cate-lv3-item {
	    width: 33.33%;
	    margin-bottom: 10px;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	
	    image {
	      width: 60px;
	      height: 60px;
	    }
	
	    text {
	      font-size: 12px;
	    }
	  }
	}
</style>
